<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>diff算法</title>
  </head>
  <body>
    <div id="app">
      <li>我是</li>
      <span>
        <b
          >{{name}}
          <a></a>
        </b>
      </span>
    </div>
    <!-- <script src="../node_modules/_vue@2.6.12@vue/dist/vue.js"></script> -->
    <script src="../dist/vue.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            name: "jxw",
          };
        },
        //1.watch监听对象没有oldVal,原因:修改对象等于修改了引用,改了引用无法获取原来的值

        /*  //watch使用1 函数名
        watch: {
          name(newVal, oldVal) {
            console.log(newVal, oldVal);
          },
        }, */

        /* //watch使用2 对象形式
        watch: {
          name: {
            handler(newVal, oldVal) {
              console.log("newVal---" + newVal, "oldVal----" + oldVal);
            },
            sync: true,
            immediate: true,
            deep: true,
          },
        }, */

        //watch使用3 数组形式,多处监听
        watch: {
          name: [
            {
              handler: "handler",
              deep: true,
            },
            {
              handler: "handler",
              sync: true,
            },
          ],
        },
        methods: {
          handler(newVal, oldVal) {
            console.log("newVal---" + newVal, "oldVal----" + oldVal);
          },
        },
      });

      vm.name = "dpj";
      vm.name = "jxw";
      vm.name2 = "jxw";

      /* 
       //watch使用4 $watch api形式
      vm.$watch(
        "name",
        (newVal, oldVal) => {
          console.log("newVal---" + newVal, "oldVal----" + oldVal);
        },
        { immediate: true }
      ); */
    </script>
  </body>
</html>
